<template>
  <div class="earthquake-settings">
    <ContentWrap>
      <HeaderTitle title="余震设置" content="启用并设置余震配置后，系统识别自动触发的正式报地震为余震后就不会触发余震的相关评估（包括响应等级判定、影响场等评估）" :isdivider="false"/>
    </ContentWrap>
    <ContentWrap>
      <div style="display: flex; align-items: center">
        <div style="width: 10px; height: 24px; background-color: #1890ff"></div>
        <h3 style="margin-left: 6px">余震配置启动</h3>
        <el-switch
          v-model="form.enable"
          style="margin-left: 50px"
          size="large"
          inline-prompt
          :active-icon="Check"
          :inactive-icon="Close"
          @change="onSwithChange"
        />
      </div>
    </ContentWrap>
    <ContentWrap>
      <div style="display: flex; align-items: center; justify-content: space-between">
        <div style="display: flex">
          <div style="width: 10px; height: 24px; background-color: #1890ff"></div>
          <div style="margin-left: 6px; color: #000; font-size: 18px; font-weight: 700"
            >配置规则</div
          >
        </div>
        <div>
          <el-button type="primary" v-show="isbut" size="large" @click="modify">修改</el-button>
        </div>
      </div>
      <el-form :model="form" :rules="rules" ref="formRef">
        <div style="display: flex; justify-content: space-around">
          <el-form-item
            label="震中距离（公里）"
            prop="epicenterDistance"
            style="margin-top: 30px; font-size: 20px"
            required
          >
            <el-input
              placeholder="请输入"
              v-model="form.epicenterDistance"
              style="width: 260px; height: 35px; margin-left: 8px"
              :disabled="isShow"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="时间间隔（小时）"
            prop="interval"
            style="margin-top: 30px; font-size: 20px"
            required
          >
            <el-input
              placeholder="请输入"
              v-model="form.interval"
              style="width: 260px; height: 35px; margin-left: 8px"
              :disabled="isShow"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div style="margin-left: 200px">
        <el-form-item style="margin-top: 30px">
          <div style="font-size: 16px">震级范围:</div>
          <el-input
            placeholder="请输入"
            v-model="form.statMagnitude"
            style="width: 70px; height: 35px; margin-left: 8px"
            :disabled="isShow"
          ></el-input>
          <el-select
            v-model="form.statType"
            placeholder="请选择"
            style="width: 60px; height: 36px; margin-left: 8px"
            :disabled="isShow"
          >
            <el-option label="≤" value="≤"></el-option>
            <el-option label="<" value="<"></el-option>
          </el-select>
          <div style="font-size: 16px; margin-left: 4px">震级</div>
          <el-select
            v-model="form.endType"
            placeholder="请选择"
            style="width: 60px; height: 36px; margin-left: 8px"
            :disabled="isShow"
          >
            <el-option label="≤" value="≤"></el-option>
            <el-option label="<" value="<"></el-option>
            <el-option label="=" value="="></el-option>
          </el-select>
          <el-input
            placeholder="请输入"
            v-model="form.endMagnitude"
            style="width: 70px; height: 35px; margin-left: 8px"
            :disabled="isShow"
          ></el-input>
        </el-form-item>
      </div>
      <div v-show="showBut" style="display: flex; justify-content: center; margin-top: 80px">
        <el-button type="primary" size="large" @click="storage">保存</el-button>
        <el-button size="large" @click="close">关闭</el-button>
      </div>
    </ContentWrap>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElFormItem, ElInput, ElButton } from 'element-plus'
import { Check, Close } from '@element-plus/icons-vue'
import * as aftershockApi from '@/api/earthquake/aftershock'

const showBut = ref(false)
const formRef = ref(null)
const isbut = ref(true)
const isShow = ref(true)
const form = ref({
  id: '',
  enable: false,
  epicenterDistance: '',
  interval: '',
  statMagnitude: null,
  statType: '≤',
  endType: '<',
  endMagnitude: null
})
const rules = {
  epicenterDistance: [{ required: true, message: '震中距离不能为空', trigger: 'blur' }],
  interval: [{ required: true, message: '时间间隔不能为空', trigger: 'blur' }]
}

//获取余震全部信息
const afterShockList = async () => {
  const list = await aftershockApi.list().then((res) => {
    return res
  })
  const data = list.list
  if (data[0] === undefined) {
    showBut.value = true
    console.log('未获取到余震配置信息')
    return
  }
  form.value = list.list[0]
}

// 启用
const onSwithChange = async (value) => {
  if (value) {
    console.log('已启用余震配置')
    form.value.enable = value
    await aftershockApi.updateAftershock(form.value)
  } else {
    console.log('已关闭余震配置')
    form.value.enable = value
    await aftershockApi.updateAftershock(form.value)
  }
}

// 修改
function modify() {
  showBut.value = true
  isbut.value = false
  isShow.value = false
}

// 保存
const storage = async () => {
  formRef.value.validate((valid) => {
    if (valid) {
      aftershockApi.updateAftershock(form.value).then((res) => {
        if (res === 1) {
          showBut.value = false
          isbut.value = true
          isShow.value = true
          afterShockList()
        }
      })
    } else {
      return false
    }
  })
}
// 关闭
function close() {
  showBut.value = false
  isbut.value = true
  isShow.value = true
}

onMounted(() => {
  afterShockList()
})
</script>

<style scoped>
.earthquake-settings {
  border-radius: 8px !important;
}
</style>
